<template>
  <v-container fluid>
    <!--横幅-->
    <v-row>
      <v-col cols="12">
        <v-banner two-line>
          <!--左侧的小日历-->
          <v-avatar slot="icon" color="deep-purple accent-4" size="40">
            <v-icon icon="mdi-calendar" color="white">mdi-calendar</v-icon>
          </v-avatar>
          <!--右边的文字表述-->
          Time is precious !
          <!--动作按钮-->
          <template v-slot:actions>
            <v-btn v-if="$store.state.user" text color="primary" @click="open('PostManage', $store.state.user.id)">Start Now</v-btn>
            <v-btn v-else text color="primary" @click="open('Login')">Login</v-btn>
          </template>
        </v-banner>
      </v-col>
    </v-row>
    <!--最近几个对话的时间线-->
    <v-timeline :dense="$vuetify.breakpoint.smAndDown">
      <v-timeline-item
        v-for="(item, index) in items"
        :key="index"
        large
      >
        <template v-slot:icon>
          <v-avatar>
            <v-img src="../assets/avatar.jpg"></v-img>
          </v-avatar>
        </template>
        <template v-slot:opposite>
          <span>{{ item.username }}</span>
        </template>
        <v-card class="elevation-2">
          <v-card-title class="headline">{{ item.title }}</v-card-title>
          <v-card-text>{{ item.content }}</v-card-text>
          <v-card-actions>
            <v-spacer></v-spacer>
            <v-btn icon>
              <v-icon>mdi-heart</v-icon>
            </v-btn>
            <v-btn icon>
              <v-icon>mdi-bookmark</v-icon>
            </v-btn>
            <v-btn icon>
              <v-icon>mdi-comment</v-icon>
            </v-btn>
          </v-card-actions>
        </v-card>
      </v-timeline-item>
    </v-timeline>
    <v-row>
      <v-col cols="12">
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
export default {
  name: 'Home',

  data: () => ({
    items: [
      {
        username: 'kimu',
        title: 'python学习心得',
        content: 'python是一门美妙的语言，它容易上手，却又不易学懂，里面藏着许多机制，一不小心就会陷进去。'
      },
      {
        username: 'a.a',
        title: 'vue学习心得',
        content: 'vue已经在世界上掀起了一股浪潮，前后端分离开发已成为一股不可分割的趋势，vue的难点语法很多，想要用好更是难上加难。'
      },
      {
        username: '夜',
        title: '神之塔漫画评价',
        content: '神之塔是一部非常优秀的漫画，我首先看的是动漫，然后才看的漫画。神之塔承载着无数登塔人的梦想，又让无数人的梦想破灭，到头来发现整个世界就是一场谎言，让人深有醒悟。'
      }
    ]
  }),
  methods: {
    open (target, id = null) {
      // 跳转之前先判断当前路由名称是否和目标路由一致，如果一致就不跳转
      if (this.$route.name !== target) {
        if (id != null) {
          this.$router.push({
            name: target,
            params: {
              id: id
            }
          })
        } else {
          this.$router.push({
            name: target
          })
        }
      }
    }
  }
}
</script>
